@import "~scss/_mixins";

.header { 
	position: sticky; top: 0px; right: 0px; width: 100%; z-index: 20; user-select: none; display: flex; flex-direction: row; align-items: center; 
	justify-content: space-between;
}

.header {
	.side {	height: 100%; display: flex; align-items: center; flex-direction: row; min-width: 20%; }
	.side.left { padding: 0px 12px; flex-shrink: 0; }
	.side.center { flex-grow: 1; justify-content: center; max-width: 60%; }
	.side.right { padding: 0px 12px; flex-shrink: 0; justify-content: end; gap: 0px 8px; }
	.side.right {
		.button.blank { font-weight: 500; border: 0px; padding: 0px 6px; color: var(--color-text-secondary); flex-shrink: 0; }
	}

	.path { 
		width: 66%; display: inline-block; border-radius: 6px; height: 28px; line-height: 26px; @include text-overflow-nw; padding: 0px 6px; 
		-webkit-app-region: no-drag;
	}
	.path {
		.label { 
			@include text-small; color: var(--color-text-secondary); padding: 3px 6px 3px 20px; border-radius: 4px; 
			background: var(--color-shape-tertiary) url('~img/icon/lock.svg') 6px 6px no-repeat; @include text-overflow-nw;
		}
	}

	.tabs { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; height: 100%; -webkit-app-region: no-drag; }
	.tabs {
		.tab { 
			font-weight: 700; color: var(--color-control-active); transition: $transitionAllCommon; text-align: center;
			vertical-align: top; padding: 0px 16px; display: flex; align-items: center; height: 100%; border-bottom: 1px solid rgba(0,0,0,0);
		}
		.tab:hover { color: var(--color-text-primary); }
		.tab.active { color: var(--color-text-primary); border-color: var(--color-text-primary); }
	}

	.headerBanner {
		position: relative; display: flex; align-items: center; gap: 0px 16px; height: 32px; padding: 6px 10px; @include text-small; border-radius: 6px; background: var(--color-shape-tertiary);
		-webkit-app-region: no-drag; 
	}
	.headerBanner {
		.label { @include text-overflow-nw; }

		.content { display: flex; gap: 0px 4px; align-items: center; }
		.content {
			.typeName { display: flex; gap: 0px 4px; flex-wrap: nowrap; }
			.typeName {
				.name { font-weight: 600; }
			}
		}
		.action { font-weight: 500; }
	}
	.headerBanner.withMenu { padding-right: 24px; }
	.headerBanner.withMenu:after { content: ''; position: absolute; right: 10px; top: 12px; width: 8px; height: 8px; background-image: url('~img/arrow/button/black.svg'); }
	.headerBanner.withMenu.active:after { transform: rotateZ(180deg); }

	.sync { -webkit-app-region: no-drag; }

	.icon.back { margin-left: 8px; }
	.icon.forward { margin-right: 8px; }

	.icon { -webkit-app-region: no-drag; flex-shrink: 0; }
	.icon.more { background-image: url('~img/icon/header/more.svg'); }
	.icon.settings { background-image: url('~img/icon/header/settings.svg'); }
	.icon.expand { display: none; background-image: url('~img/icon/header/expand.svg'); }
	.icon.relation { background-image: url('~img/icon/header/relation.svg'); }
	.icon.graph { background-image: url('~img/icon/menu/action/graph0.svg'); }
	.icon.pin { background-image: url('~img/icon/header/pin.svg'); }
	.icon.unpin { background-image: url('~img/icon/header/unpin.svg'); }
	.icon.widgetPanel { background-image: url('~img/icon/header/widget.svg'); }
	.icon.share { background-image: url('~img/icon/header/share.svg'); }
}
.header.isSmall {
	.path { visibility: hidden; overflow: hidden; width: 0px; }
}

.header.sidebarAnimation {
	.side.left { transition: padding-left $transitionSidebarTime linear; }
}

.header:not(.withSidebarLeft) {
	.side.left { padding-left: 120px; }
}

html:not(.platformMac) {
	.header:not(.withSidebarLeft) {
		.side.left { padding-left: 52px; }
	}
}

body.isFullScreen {
	.header:not(.withSidebarLeft) {
		.side.left { padding-left: 52px; }
	}
}

.header.authIndex { height: 52px; width: 100% !important; }
.header.authIndex {
	.side.left { padding: 86px; }

	.select {
		border: 0px; -webkit-app-region: no-drag; padding: 4px 6px 4px 29px; border-radius: 6px;
		@include text-small; font-weight: 500; color: var(--color-text-secondary);
	}
	.select:hover,
	.select.hover { background: var(--color-shape-highlight-medium); }
	.select {
		.icon.arrow { display: none; }

		&:before { content: ''; position: absolute; left: 6px; top: 4px; width: 18px; height: 18px; background: url('~img/icon/header/language.svg'); }
	}

	.logo { width: 70px; height: 18px; background: url('~img/logo/black.svg'); }
}

html:not(.bodyIndexIndex):not(.bodyAuthSelect) {
	.header.authIndex {
		.icon.settings { display: none; }
	}
}

html.bodyIndexIndex,
html.bodyAuthSelect {
	.header.authIndex {
		.icon.arrow.back { display: none; }
	}
}

.header.mainHistory { height: 52px; width: calc(100% - $sidebarRightWidth); right: $sidebarRightWidth; background: var(--color-bg-primary); }
.header.mainHistory {
	.side.center { overflow: hidden; }
	.side.center {
		.txt { @include text-overflow-nw; }
	}
}

.header.isCommon { background: var(--color-bg-primary); height: 52px; }
.header.isCommon {
	.path { border: 1px solid rgba(0,0,0,0); padding: 0px 10px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0px 6px; }
	.path {
		.iconObject { flex-shrink: 0; }
		.name { @include text-overflow-nw; }
	}
	.path:hover { border-color: var(--color-shape-secondary); }
}

.header.mainGraph {
	.side.right { gap: 0px 12px; }

	.filterWrap { width: 0px; overflow: hidden; transition: $transitionAllCommon; display: none; }
	.filterWrap {
		.filter { width: 100%; padding: 0px; }
		.inner { height: 28px; }
		.line { display: none; }
	}
	.filterWrap.active { width: 200px; }

	.icon.btn-search { background-image: url('~img/icon/header/search.svg'); }
	.icon.btn-filter { background-image: url('~img/icon/dataview/button/filter0.svg'); }
	.icon.btn-settings { background-image: url('~img/icon/dataview/button/settings.svg'); }
}

.header.mainSettings {
	.identity { 
		-webkit-app-region: no-drag; display: flex; gap: 0px 4px; align-items: center; height: 22px; padding: 0px 8px 0px 6px; border-radius: 11px; 
		background: var(--color-shape-highlight-medium); text-transform: uppercase;
	}
	.identity {
		.icon.anyName { width: 20px; height: 20px; background: url('~img/icon/header/anyName.svg'); }
		.icon.info { width: 16px; height: 16px; background: url('~img/icon/header/info.svg'); }
		.label { @include text-very-small; font-weight: 500; color: var(--color-text-primary); }
	}
}

.popup {
	.header { position: sticky; padding: 0px; top: 0px !important; }
	.header {
		.side.left { padding-left: 14px !important; }
		.side.left {
			.icon.sidebar { display: none; }
			.icon.expand { display: inline-block; }
		}
	}
}
